<script setup lang="ts">
import * as THREE from "three";
import { TextureLoader } from "three";
import { useGraph, useLoader } from "@tresjs/core";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { computed, ref } from "vue";
import { useAnimations } from "@tresjs/cientos";

const emits = defineEmits(["platAnimation"]);
const { state: model } = await useLoader(
  GLTFLoader,
  "./model/SK_FuQian_A1.glb"
);
const { state: texture } = await useLoader(TextureLoader, "./ui/content3.png");
// 关键设置：优化清晰度
texture.value.anisotropy = 1;
texture.value.colorSpace = THREE.SRGBColorSpace;
texture.value.generateMipmaps = false; // 确保生成Mipmap（通常默认true）
texture.value.magFilter = THREE.NearestFilter; // 关键设置：放大时使用最近邻过滤，保持锐利
texture.value.minFilter = THREE.LinearFilter;

const graph = useGraph(model.value?.scene as any);
console.log("graph.value:", graph.value);
const nodes = computed(() => {
  return graph.value?.nodes;
});
// 设置材质
if (nodes.value?.Paper_Mesh_007) {
  nodes.value.Paper_Mesh_007.material = new THREE.MeshBasicMaterial({
    name: "M_QiFuQian_2",
    blending: 1,
    map: texture.value,
    // color: new THREE.Color("#e7ba81"), // 光泽颜色
    lightMapIntensity: 0,
    side: 0,
  });
}
console.log("nodes.value?.Scene:", nodes.value?.Scene);
// 设置位置和旋转
nodes.value?.Scene.position.set(-0.5, 0.5005, -1);
nodes.value?.Scene.rotation.set(
  Math.PI * (0 / 180),
  Math.PI * (130 / 180),
  Math.PI * (0 / 180)
);
// 提取模型
const Scene = computed(() => {
  return graph.value?.nodes?.Scene;
});

// 播放动画
const { actions, mixer } = useAnimations(
  model.value.animations,
  graph.value?.nodes.Scene as any
);
const animation = actions["Root_Paper|Take 001|BaseLayer"];

animation?.setLoop(THREE.LoopOnce, 1); // 设置为仅播放一次
animation?.play();
emits("platAnimation"); // 触发事件，通知父组件播放动画
</script>

<template>
  <primitive v-if="Scene" :object="Scene" />
</template>
